<template>
	<div class="activeRate">
		<h3>Rate 评分</h3>
		<div class="rate1">
			<p>三个等级所对应的颜色用过colors属性设置，而它们对应的两个阈值则通过 low-threshold 和 high-threshold 设定。</p>
			<el-row :gutter="20">
				<el-col :span="12">
					<span style="margin: 10px 0;">默认不区分颜色</span>
					<el-rate v-model="rateVal1" style="margin: 10px 0;"></el-rate>
				</el-col>
				<el-col :span="12">
					<span style="margin: 10px 0;">区分颜色</span>
					<el-rate v-model="rateVal2"  :colors="['#99A9BF', '#F7BA2A', '#FF9900']" style="margin: 10px 0;"></el-rate>
				</el-col>
			</el-row>
		</div>
		<div class="rate2">
			<h3>辅助文字</h3>
			<p>为组件设置 show-text 属性会在右侧显示辅助文字。</p>
			<p>通过设置 texts 可以为每一个分值指定对应的辅助文字。texts 为一个数组，长度应等于最大值 max。</p>
			<el-rate v-model="rateVal3" show-text :texts="['1','2','3','4','5']"></el-rate>
		</div>
		<div class="rate3">
			<h3>其他icon</h3>
			<p>设置icon-classes属性可以自定义对应 3 个不同分段的图标。本例还使用void-icon-class指定了未选中时的图标类名。</p>
			<el-rate v-model="rateVal4" show-text :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"void-icon-class="icon-rate-face-off":colors="['#99A9BF', '#F7BA2A', '#FF9900']">
			</el-rate>
		</div>
		<div class="rate4">
			<h3>只读</h3>
			<el-rate v-model="rateVal5" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				rateVal1:null,
				rateVal2:null,
				rateVal3:null,
				rateVal4:null,
				rateVal5:4.7
			}
		}
	}
</script>

<style>

</style>